<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>文章列表</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="cate_1st_name" label="一级分类" />
            <el-table-column prop="cate_2nd_name" label="二级分类" />
            <el-table-column prop="main_photo" label="头像">
                <template #default="scope">
                    <div class="block">
                        <el-avatar shape="square" :size="50" :src="scope.row.main_photo" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="tags" label="角色" width='180'>
                <template #default="scope">
                    <!-- <el-space> -->
                    <el-tag v-for="(item,index) in scope.row.tags" :key="item">{{item.name}}</el-tag>
                    <!-- </el-space> -->
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="发布日期">
            </el-table-column>
            <el-table-column prop="update_time" label="更新日期">
            </el-table-column>
            <el-table-column label="操作" width='210'>
                <template #default="scope">
                    <el-space>
                        <el-link :href="`/#/article/edit/${scope.row.id}`">
                            <el-button type="primary" size="small" plain>
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                                编辑
                            </el-button>
                        </el-link>
                        <el-button @click="handletag(scope.row,scope.$index)" size="small" type="success" plain>
                            <el-icon>
                                <EditPen />
                            </el-icon>
                            标记
                        </el-button>
                        <el-button @click="handleRemove(scope.row.id,scope.$index)" size="small" type="danger" plain>
                            <el-icon>
                                <Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 标记dialog -->
    <el-dialog v-model="dialogVisible" title="标记角色">
        <el-form ref="formRef" :model="form" label-width="80px">
            <el-form-item>
                <template #default="scope">
                    <el-space>
                        <el-tag v-for="(item,index) in form" :key="item" closable @close="handleClose(item,index)">
                            {{item.name}}</el-tag>
                    </el-space>
                </template>
            </el-form-item>
            <el-form-item>
                <template #default="scope">
                    <el-space>
                        <el-tag v-for="(item,index) in formdata" :key="item" type="success"
                            @click="handleon(item,index)">
                            {{item.name}}
                        </el-tag>
                    </el-space>
                </template>

            </el-form-item>
        </el-form>
        <template #footer>

            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit(formRef)">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { toRefs, reactive, ref, computed, onMounted, onUpdated } from 'vue';
import Article from '@/api/article';
import { repeat, set } from 'lodash';
import { list } from 'postcss';
// import { id } from 'element-plus/es/locale';
// import { ElMessageBox } from 'element-plus';
const tableData = ref([]);
let dialogVisible = ref(false);
let form = ref({ tags: [] });
let a = ref(0);
let current = ref(0);
async function loadList() {
    let { status, data } = await Article.list();
    if (status) {
        tableData.value = data;
        // console.log(data)
    }
}
loadList();
//打开标记弹窗
async function handletag(data, i) {
    dialogVisible.value = true;
    // console.log(data,i)
    let copy = JSON.parse(JSON.stringify(data));
    form.value = copy.tags
    // console.log(data)
    // console.log(form.value.article_id)
    current.value = i;

}
const formdata = ref([]);
async function load() {
    let { status, msg, total, data } = await Article.taglist();
    if (status) {
        formdata.value = data;
    }
}
load();
let arr = [];
//操作弹窗内的标签删除
const handleClose = (item, index) => {
    a.value = item.article_id;
    form.value.splice(form.value.indexOf(item), 1)
    for (let i = 0; i < form.value.length; i++) {
        arr.push(form.value[i].id);
    }
}
// 标记标签
// let list=reactive([]);
const handleon = (item, index) => {
    form.value.push(item)
    for (let i = 0; i < form.value.length; i++) {
        arr.push(form.value[i].id);
    }
}
//点击保存,标记标签
async function handleEdit() {
    //发送ajax
    let { status, msg } = await Article.tag({ id: a.value, tags:[...new Set(arr)] });
    if (status) {
        //修改成功,修改DOM
        tableData.value[current.value].tags = form.value
        //关闭弹窗，消息提示
        dialogVisible.value = false;
        ElMessage.success(msg);
    } else {
        //错误提示
        ElMessage.error(msg);
    }
}
//删除操作
function handleRemove(id, i) {
    ElMessageBox.confirm('确定要删除？', '确认删除', { type: 'error', cancelButtonText: '取消', confirmButtonText: '确认' })
        .then(async () => {
            //点击确认
            //发送ajax
            let { status, msg } = await Article.remove({ id })
            if (status) {
                ElMessage.success(msg);
                //操作DOM
                tableData.value.splice(i, 1);
            } else {
                ElMessage.error(msg);
            }
        })
        //取消
        .catch(() => {
            //取消
            ElMessage.info('取消成功');
        });
}
</script>
<style lang="less" scoped>

</style>
